<template>
    <div class="container_box">
        <el-scrollbar ref="scrollbarRef" class="main_box2">
            <div class="header">
                <Step
                    ref="stepRef"
                    :current-step="currentStep"
                    :steps-label="stepsLabel"
                    :total-steps="stepsLabel.length" />
            </div>
            <div class="container">
                <div class="content">
                    <!-- 基础设置 -->
                    <div v-show="currentStep == 1">
                        <BasicSet ref="BasicSetRef" :page-type="pageType" :group_id="group_id" />
                    </div>
                    <!-- 门店设置 -->
                    <div v-show="currentStep == 2"><StoreSet ref="StoreSetRef" :page-type="pageType" /></div>
                    <!-- 引流页面 -->
                    <div v-show="currentStep == 3"><DrainageSet ref="DrainageSetRef" :page-type="pageType" /></div>
                    <!-- 欢迎语 -->
                    <div v-show="currentStep == 4">
                        <Welcome
                            ref="WelcomeRef"
                            from="storeCustomers"
                            :max-num="9"
                            :store-customers="false"
                            :page-type="pageType"
                            :cus-tag="cusTag"
                            :content-tabs="[6, 1, 2, 3]"
                            @submit="onSubmit" />
                    </div>
                </div>
            </div>
        </el-scrollbar>
        <div class="footer_box">
            <el-button v-if="currentStep == 1" @click="onRouter()">取消</el-button>
            <el-button v-else @click="onStep">上一步</el-button>
            <el-button v-if="currentStep != 4" type="primary" @click="onNext(currentStep)">下一步</el-button>
            <el-button v-else type="primary" @click="onNext(currentStep)">
                {{ pageType == 'look' ? '返回' : '保存' }}
            </el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import Step from '@/components/Step.vue';
import BasicSet from './components/BasicSet.vue';
import StoreSet from './components/StoreSet.vue';
import DrainageSet from './components/DrainageSet.vue';
import Welcome from '@/components/welcome/ZWelcome.vue';
import { customerCreate, customerEdit, customerLook } from '@/api/smartMarketing/storeCustomers';
import { getSetionId } from '@/utils/utils';
import { FormInstance, FormRules, ElMessage } from 'element-plus';
import { useRouter, useRoute } from 'vue-router';
import { onMounted, ref, nextTick } from 'vue';
import { useStore } from '@/store';
const store = useStore();
const router = useRouter();
const route = useRoute();
const pageType = route.query.type;
const stepRef: any = ref(null);
const BasicSetRef: any = ref(null);
const StoreSetRef: any = ref(null);
const DrainageSetRef: any = ref(null);
const WelcomeRef: any = ref(null);
const cusTag = ref(true);
const custTag: any = ref([]);
const group_id = ref(Number(route.query?.group_id));

const stepsLabel: any = ref([
    { title: '基础设置', stepIndex: 1 },
    { title: '门店设置', stepIndex: 2 },
    { title: '引流页面', stepIndex: 3 },
    { title: '欢迎语', stepIndex: 4 }
]);
const scrollbarRef = ref<any>(null);
/**
 * @description: 滚动到顶部
 */
const setScrollTopHandle = () => {
    nextTick(() => {
        scrollbarRef.value?.setScrollTop(0);
    });
};
const currentStep = ref(1);
const onStep = () => {
    currentStep.value--;
    stepRef.value.back();
    setScrollTopHandle();
};
const onRouter = () => {
    store.dispatch('setGroupId', BasicSetRef.value.formData.group_id);
    router.back();
};
const onNext = async (curStep: number) => {
    if (pageType == 'look') {
        currentStep.value == 4 && onRouter();
        currentStep.value++;
        stepRef.value.next();
        setScrollTopHandle();
        return;
    }
    switch (curStep) {
        case 1: // 活动信息
            if (!BasicSetRef.value.formRef) return;
            await BasicSetRef.value.formRef.validate((valid: any, fields: any) => {
                if (valid) {
                    currentStep.value++;
                    stepRef.value.next();
                    setScrollTopHandle();
                }
            });
            break;
        case 2: // 门店设置
            if (StoreSetRef.value.formData.store_ids.length) {
                currentStep.value++;
                stepRef.value.next();
                setScrollTopHandle();
            } else {
                ElMessage.error('请设置门店');
            }
            break;
        case 3: // 引流设置
            if (!DrainageSetRef.value.formRef) return;
            await DrainageSetRef.value.formRef.validate((valid: any) => {
                if (valid) {
                    currentStep.value++;
                    stepRef.value.next();
                    setScrollTopHandle();
                } else {
                    ElMessage.error('请填完必填项');
                }
            });
            break;
        case 4: // 引流设置
            if (pageType == 'look') {
                router.back();
                return;
            }
            WelcomeRef.value.onSubmit();
            break;
    }
};
const onSubmit = async () => {
    if (pageType == 'look') {
        onRouter();
        return;
    }

    const params = {
        ...BasicSetRef.value.formData,
        ...StoreSetRef.value.formData,
        ...DrainageSetRef.value.formData,
        welcome_flag: WelcomeRef.value.welcome_flag,
        welcome_type: WelcomeRef.value.formData.welcome_type,
        welcome_info: WelcomeRef.value.formData.materialResult.welcome_info, // 使用欢迎语组件数据
        time_welcome_flag: WelcomeRef.value.formData.time_welcome_flag,
        time_welcome: WelcomeRef.value.formData.time_welcome,
        join_cust_tags: WelcomeRef.value.formData.tag_list,
        tag_flag: WelcomeRef.value.tag_flag
    };
    // return
    if (pageType) {
        customerEdit(params).then(() => {
            ElMessage.success('编辑成功');
            router.push({
                path: '/smartMarketing/drainage/storeCustomers',
                query: { group_id: BasicSetRef.value.formData.group_id }
            });
        });
    } else {
        customerCreate(params).then(() => {
            ElMessage.success('新建成功');
            router.push({
                path: '/smartMarketing/drainage/storeCustomers',
                query: { group_id: BasicSetRef.value.formData.group_id }
            });
        });
    }
};
const getLook = async () => {
    const res = await customerLook({ activity_id: route.query.id });
    BasicSetRef.value.formData = {
        is_auth: res.is_auth,
        activity_id: res.activity_id,
        official_account_id: res.official_account_id,
        activity_name: res.activity_name,
        group_id: res.group_id,
        period_type: res.period_type,
        activity_time: res.activity_time
    };
    StoreSetRef.value.getLookStoresList(res.store_ids);
    DrainageSetRef.value.formData = {
        share_type: res.share_type,
        card: res.card,
        poster: res.poster
    };

    WelcomeRef.value.welcome_flag = res.welcome_flag;
    WelcomeRef.value.formData.welcome_flag = res.welcome_flag;
    WelcomeRef.value.formData.tag_list = getSetionId('id', res.join_cust_tags);
    WelcomeRef.value.AllTags = res.join_cust_tags;
    custTag.value = getSetionId('id', res.join_cust_tags);
    WelcomeRef.value.tag_flag = res.tag_flag;
    WelcomeRef.value.onLookData(res.welcome_info);
    WelcomeRef.value.formData.welcome_type = res.welcome_type;
    // WelcomeRef.value.onLookTime(res.time_welcome)
    // WelcomeRef.value.formData.time_welcome_flag = res.time_welcome_flag
    WelcomeRef.value.welcome_flag = res.welcome_flag;
};
onMounted(() => {
    pageType && getLook();
});
</script>
<style lang="scss" scoped>
.header {
    padding: 21px;
    border: 1px solid #eaeaea;
    border-top: none;
    border-radius: 1px;
    box-shadow: 0 4px 4px 1px rgb(240 240 240 / 50%);
    background: #fff;
    margin-bottom: 16px;
    box-sizing: border-box;
}

.container {
    min-height: calc(100vh - 298px);
    padding: 24px;
    box-sizing: border-box;
    box-shadow: 0 4px 4px 1px rgb(240 240 240 / 50%);
    border-radius: 1px;
    opacity: 1;
    border: 1px solid #eaeaea;
    border-bottom: none;
    background: #fff;

    .btn_box {
        padding-top: 13px;
        text-align: center;
        border-top: 1px solid #d9d9d9;
    }
}

.welcome {
    color: #606266;
    font-size: 14px;
    padding-left: 38px;
    padding-bottom: 5px;
}
</style>
